<template>
  <div>
    <van-search
      v-model="search"
      class="my-nav"
      placeholder="请输入快检设备名称"
      @search="onSearch"
      @cancel="onCancel"
    >
    </van-search>

    <div class="page_space">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-radio-group v-model="radio">
          <base-card
            v-for="(item, index) in list"
            :key="index"
            class="mt-15"
            :title="item.title"
            :data="item.data"
            @click="hitThis(item)"
          >
            <template #header>
              <div @click.stop>
                <van-radio
                  :name="item.id"
                  checked-color="#2163E0"
                  class="mr-10"
                ></van-radio>
              </div>
            </template>
          </base-card>
        </van-radio-group>
      </van-list>
    </div>

    <div class="btn_wrap">
      <button class="btn middle default" @click="$router.go(-1)">取消</button>
      <button class="btn middle" @click="submit">确认</button>
    </div>
  </div>
</template>

<script>
import baseCard from '@/components/base-card'
import { getEquipment } from '@/api/detection'
import { store, mutations } from '@/observable'

export default {
  name: 'managePerson',
  components: { baseCard },
  data() {
    return {
      search: '',
      checked: true,
      loading: false,
      finished: false, // 触底加载结束
      params: {
        limit: 10,
        page: 1,
        businessVarietyName: '',
        areaCode: '440902001000',
        managementEntId: '2310101028504090000'
      },
      list: [],
      personList: [],
      radio: '',
      info: {},
      INDEX: ''
    }
  },
  created() {
    this.INDEX = this.$route.query.index
  },
  methods: {
    // 提交
    submit() {
      mutations.setInspectorEquipmentInfo(this.info)
      this.$router.go(-1)
    },
    // 选中
    hitThis(e) {
      this.radio = e.id
      this.info = {
        equipmentId: e.id,
        equipmentName: e.name,
        INDEX: this.INDEX
      }
    },
    // 筛选
    onFilter() {
      // 如果先前已筛选，则重置
      if (
        this.params.subjectType ||
        this.params.managementEntNameAndShortName
      ) {
        this.params.subjectType = ''
        this.params.subjectTypeName = ''
        this.params.managementEntNameAndShortName = ''
        this.getInspectList(this.params, true)
      } else {
        this.$router.push('/')
      }
    },
    onSearch(val) {
      this.search = val.trim()
      this.params.name = this.search
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    onCancel() {
      this.search = ''
      this.params.name = ''
      this.params.page = 1
      this.list = []
      this.getList(this.params)
    },
    // 触底加载
    onLoad() {
      this.getList(this.params)
    },
    // 选择采样人员
    async getList(params) {
      const { code, data } = await getEquipment(params)
      if (code === '0') {
        data.content.forEach((item) => {
          this.list.push({
            title: item.name,
            id: item.id,
            checked: false,
            data: [
              {
                key: '设备编码',
                value: item.code
              },
              {
                key: '设备厂家',
                value: item.brand
              }
            ]
          })
        })
        // 加载状态结束
        this.loading = false
        // this.params.page++
        console.log(data)
        // 数据全部加载完成
        if (data.last) {
          this.finished = true
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.filter {
  width: 20px;
  height: 20px;
}
.my-nav {
  position: sticky;
  top: 0;
  z-index: 999;
}
.btn_wrap {
  .tip {
    font-family: PingFang SC Medium;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    letter-spacing: 0px;
    /* 粤商通/常规黑色 */
    color: #171819;
    .count {
      /* 粤商通/常规蓝色 */
      color: #2163e0;
      margin-left: 5px;
    }
    .all {
      color: #b2b8bd;
      margin-top: 6px;
    }
  }
}
</style>
